<template>
  <div class="components-input-presuffix" >
    <div>
      <el-input
        placeholder="请选择公司"
        @focus="handleFocus"
        @click="openModal"
        :disabled="disabled"
        :readonly="readonly"
        ref="input"
        v-model="text">
        <i @click="handleEmpty" v-if="!readonly"  slot="suffix" class="el-input__icon el-icon-circle-close"></i>
      </el-input>
    </div>
    <select-company-modal ref="selectModal" @ok="selectFinsh" ></select-company-modal>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import SelectCompanyModal from './SelectCompanyModal'

  export default {
    components:{ SelectCompanyModal },
    name: 'SelectCompany',
    data(){
      return {
        inputFlag :true,
        text:""
      }
    },
    props:{
      value:{
        type:String,
        required:false
      },
      disabled:{
        type:Boolean,
        required: false,
        default:false
      },
      readonly:{
        type:Boolean,
        required: false,
        default:false
      }
    },
    watch:{
      value(val){
        this.initData();
      }
    },
    mounted(){
      this.initData();
    },
    methods:{
      initData(){
        if(this.inputFlag) {
          this.text = "";
          if (this.value) {
            getAction(`/company/getInfo/${this.value}`).then(res => {
              if (res.success) {
                this.text = res.data.name;
              }
            }).catch(e => console.error(e));
          }
        }
        this.inputFlag = true;
      },
      openModal(){
        this.$refs.selectModal.open();
      },
      handleEmpty(){
        if(!this.$refs.input.inputDisabled){
          this.text = "";
          this.$emit("input","");
        }
      },
      handleFocus(){
        this.$refs.selectModal.open();
      },
      selectFinsh(row){
        console.log(row.name);
        this.text = row.name
        this.inputFlag = false;
        this.$emit("input",row.id);
      }
    }
  }
</script>

<style scoped>
  el-input{
    cursor:pointer;
  }
</style>
